<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    .div1 {
        height: 21px;
        background: #FFFFFF;
        width: 60px;
        position: relative;
    }

    .div2 {
        text-align: center;
        width: 60px;
        height: 21px;
        font-size: 15px;
    }

    .inputstyle {
        width: 60px;
        height: 16px;
        cursor: pointer;
        font-size: 30px;
        outline: medium none;
        position: absolute;
        filter: alpha(opacity=0);
        -moz-opacity: 0;
        opacity: 0;
        left: 0px;
        top: 0px;
    }
</style>
<script src="http://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
<!--<script type="text/javascript" src="/js/layer/layer.js"></script>-->
<div>
    <h1>发布</h1>
</div>
<div>
    <form action="" enctype="multipart/form-data"></form>
    <div>
        <span>标题: </span>
        <span><input type="text"></span>
    </div>

    <div style="height:40px">
        <span>内容: </span>
        <span><textarea></textarea></span>
    </div>
    <div>
        <span>
            <span id="btns"></span>
            <span class="div1">
                <input type="file" class="inputstyle" id="uploadImage" accept="image/*" num="5" width="2000px"
                       height="200px" onchange="upload(this,'imgs','btns','thumb')"/>
                <span class="div2"><button>上传图片</button></span>
            </span>
            <span id="imgs"></span>

        </span>
    </div>
    <div id="albums" style="width:800px;height:400px;display: none"></div>
    <div>
        <span>&nbsp;</span>
                <span>
                    <input type="hidden" name="token" id="token">
                    <input type="hidden" name="aeskey" id="aeskey">
                    <input type="submit"  value="发布">
                </span>
    </div>
    </form>
</div>

</div>
<script>
    function upload(obj, imgId, btnId, name) {
        var _self = obj;
        var _this = $(obj);
        var fileReader = new FileReader();
        fileReader.onload = function (e) {
            if (fileReader.readyState == FileReader.DONE) {
                var file = _self.files[0];
                var size = file.size;
                var width = file.width;
                var height = file.height;
                var param_num = _this.attr('num');//上传图片数量
                var param_count = _this.attr('count');//已上传图片数量
                if (param_num == null || param_num == undefined) {
                    _this.attr('num', 1);
                }
                if (param_count == null || param_count == undefined) {
                    _this.attr('count', 0);
                }
                var num = parseInt(_this.attr('num'));
                var count = parseInt(_this.attr('count'));
                if (count < num) {
                    count = count + 1;
                    var upFileId = _this.attr('id');
                    var fileId = imgId + '_' + count;
                    var func = 'delImg("' + upFileId + '","' + fileId + '")';
                    $("#" + imgId).append('<div class="' + fileId + '"><img src="' + this.result + '" width="100px"  height="100px"/></div><div class="' + fileId + '" onclick=' + func + '>删除</div>');
                    $("#" + btnId).append('<input type="hidden" name="' + name + '" class="' + fileId + '"  value="' + this.result + '">');
                    _this.attr('count', count);
                } else {
                    alert('最多上传' + num + '张');
                }
            }
        };
        //一次加载多个文件
        var i = 0, src = _self.files;
        fileReader.readAsDataURL(src[i]);
        fileReader.onloadend = function () {
            i++;
            if (i < src.length) fileReader.readAsDataURL(src[i]);
        }
    }


    function delImg(upInputId, fileId) {
        var _this = $("#" + upInputId);
        var count = parseInt(_this.attr('count'));
        _this.attr('count', count - 1);
        $("." + fileId).remove();
    }

    $("form").submit(function () {
        var market_price = $("#market_price").val();
        var shop_price = $("#shop_price").val();
        var number = $("#number").val();
        var sort = $("#sort").val();
        if (isNaN(market_price) || (parseInt(market_price) <= 0)) {
            layer.msg('市场价为纯数字且不能小于0', {
                time: 2000
            }, function () {
                $("#market_price").focus();
            });
            return false;
        }
        if (isNaN(shop_price) || (parseInt(shop_price) <= 0)) {
            layer.msg('本店售价必须为纯数字且必须大于0', {
                time: 2000
            }, function () {
                $("#shop_price").focus();
            });
            return false;
        }
        if (isNaN(number) || (parseInt(number) <= 0)) {
            layer.msg('库存必须为纯数字且必须大于0', {
                time: 2000
            }, function () {
                $("#number").focus();
            });
            return false;
        }
        if (isNaN(sort) || (parseInt(sort) < 0)) {
            layer.msg('排序必须为纯数字且必须大于0', {
                time: 2000
            }, function () {
                $("#sort").focus();
            });
            return false;
        }
    });
</script>

</body>
</html>